<template>
  <div class="main">
    <div class="serbox">
      <div class="inp">
        <div>
          <el-input placeholder="请输入搜索内容" v-model="searchText">
          </el-input>
        </div>
        <el-button
          type="primary"
          style="margin-left: 15px"
          size="medium"
          @click="search"
          >查询</el-button
        >
      </div>

      <el-button type="primary" @click="openpop(1)">添加规格</el-button>
    </div>
    <div class="table">
      <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column type="index" label="序号" width="80">
        </el-table-column>
        <el-table-column prop="name" label="规格名称"> </el-table-column>
        <el-table-column prop="typetext" label="规格类型"> </el-table-column>
        <el-table-column prop="gmtCreate" label="创建时间"> </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              @click="chodel(scope.row)"
              type="text"
              style="color: red"
              size="small"
              >删除</el-button
            >
            <el-button
              @click="openpop(scope.row, 0)"
              type="text"
              style="color: #606266"
              size="small"
              >详情</el-button
            >
            <el-button
              @click="openpop(scope.row, 1)"
              type="text"
              style="color: #606266"
              size="small"
              >编辑</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="page">
      <div class="btns">
        <!-- <el-button type="primary">批量删除</el-button> -->
      </div>
      <el-pagination
        background
        @current-change="changePage"
        :current-page.sync="page"
        :page-size="pageSize"
        layout="total,prev,pager,next,jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    <!-- 弹框 -->
    <el-dialog title="商品规格" :visible.sync="specpop" width="50%">
      <el-form label-width="120px">
        <el-form-item label="规格名称">
          <el-input
            v-model="formDate.name"
            placeholder="请输入规格名称"
            :disabled="!isedit"
          ></el-input>
        </el-form-item>
        <el-form-item label="规格值">
          <el-button
            type="primary"
            size="small"
            style="margin-bottom: 10px"
            v-if="isedit"
            @click="addspec"
            >添加规格值</el-button
          >
          <div
            class="addbox"
            v-for="(item, index) in formDate.spec"
            :key="index"
          >
            <div class="elinp">
              <el-input
                v-model="formDate.spec[index].specValue"
                placeholder="请输入规格值名称"
                :disabled="!isedit"
              ></el-input>
            </div>
            <span class="del" @click="delspec(index)" v-if="isedit">删除</span>
          </div>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="addSpecSubmit" v-if="isedit"
            >提 交</el-button
          >
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchText: "",
      tableData: [], // 列表表单
      total: 0,
      page: 1,
      pageSize: 10,
      specpop: false,
      formDate: {
        id: "",
        name: "",
        spec: [{ id: "", specValue: "" }],
      },
      isAdd: true,
      isedit: true,
    };
  },
  mounted() {
    this.getSpecList();
  },
  methods: {
    openpop(e, type) {
      if (e == 1) {
        this.isAdd = true;
        this.isedit = true;
        this.clearFormDate();
      } else {
        this.isAdd = false;
        if (type == 0) {
          // 详情
          this.isedit = false;
        } else if (type == 1) {
          // 编辑
          this.isedit = true;
        }
        // 获取详情信息
        this.getSpecInfo(e.id);
      }
      this.specpop = true;
    },
    // 获取规格列表
    getSpecList() {
      this.$postRequest("/mall/goodsSpec/list", {
        shopId: sessionStorage.getItem("shopId"),
        name: this.searchText,
        pageNum: this.page,
        pageSize: this.pageSize,
      }).then((res) => {
        for (var i = 0; i < res.rows.length; i++) {
          res.rows[i].typetext = "文字";
        }
        this.total = res.total;
        this.tableData = res.rows;
      });
    },
    // 获取规格详情信息
    getSpecInfo(id) {
      this.$getRequest("/mall/goodsSpec/" + id, {}).then((res) => {
        this.formDate.name = res.data.name;
        this.formDate.id = res.data.id;
        var arr = [];
        for (var i = 0; i < res.data.specValues.length; i++) {
          var obj = {};
          obj.id = res.data.specValues[i].id;
          obj.specValue = res.data.specValues[i].specValue;
          arr.push(obj);
        }
        this.formDate.spec = arr;
      });
    },
    // 弹框添加规格值
    addspec() {
      var obj = { id: "", specValue: "" };
      this.formDate.spec.push(obj);
    },
    // 弹框删除规格值
    delspec(index) {
      this.formDate.spec.splice(index, 1);
    },
    // 提交按钮
    addSpecSubmit() {
      // 判断规格值是否有空缺
      var isnull = true;
      for (var i = 0; i < this.formDate.spec.length; i++) {
        if (this.formDate.spec[i].specValue == "") {
          isnull = false;
          break;
        }
      }
      if (this.formDate.name == "") {
        this.$message.error("请输入规格名称");
      } else if (this.formDate.spec.length < 1) {
        this.$message.error("请添加规格");
      } else if (!isnull) {
        this.$message.error("请将规格值补充完整");
      } else {
        if (this.isAdd) {
          this.add();
        } else {
          this.edit();
        }
      }
    },
    // 添加规格提交
    add() {
      // 修改传参数据格式
      var arr = [];
      for (var i = 0; i < this.formDate.spec.length; i++) {
        var obj = {};
        obj.specValue = this.formDate.spec[i].specValue;
        arr.push(obj);
      }
      // 请求
      this.$postRequest("/mall/goodsSpec/add", {
        shopId: sessionStorage.getItem("shopId"),
        name: this.formDate.name,
        type: 0,
        specValues: arr,
      }).then((res) => {
        this.$message.success("添加成功");
        this.specpop = false;
        this.getSpecList();
      });
    },
    // 修改规格提交
    edit() {
      this.$postRequest("/mall/goodsSpec/edit", {
        type: 0,
        shopId: sessionStorage.getItem("shopId"),
        id: this.formDate.id,
        specValues: this.formDate.spec,
      }).then((res) => {
        this.$message.success("修改成功");
        this.specpop = false;
        this.getSpecList();
      });
    },
    // 输入框搜索
    search() {
      this.page = 1;
      this.getSpecList();
    },
    // 删除
    chodel(e) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$postRequest("/mall/goodsSpec/remove", {
            id: e.id,
          }).then((res) => {
            this.$message.success("删除成功");
            this.page = 1;
            this.getSpecList();
          });
        })
        .catch(() => {
          this.$message.info("已取消删除");
        });
    },
    // 新建时清空表单
    clearFormDate() {
      this.formDate = {
        id: "",
        name: "",
        spec: [{ id: "", specValue: "" }],
      };
    },
    // 分页
    changePage(e) {
      this.page = e;
      this.getSpecList();
    },
  },
};
</script>

<style lang="scss" scoped>
/deep/ .el-table th > .cell,
/deep/ .el-table .cell {
  text-align: center;
}
/deep/ .el-button--primary {
  background-color: #0655ce;
  border-color: #0655ce;
}
/deep/ .el-checkbox__input.is-checked .el-checkbox__inner,
/deep/ .el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background-color: #0655ce;
  border-color: #0655ce;
}
/deep/ .el-input.is-disabled .el-input__inner {
  color: #606266;
  background-color: #fff;
  cursor: default;
}
.main {
  margin: 20px;
  background: #fff;
  .serbox {
    height: 60px;
    padding: 0 20px;
    align-items: center;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #eeeeee;
    .inp {
      align-items: center;
      display: flex;
      justify-content: space-between;
    }
  }
}
.table {
  border: 1px solid #eee;
  margin: 20px;
}
.page {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 40px;
  height: 60px;
}
.addbox {
  display: flex;
  .elinp {
    width: 30%;
  }
  .del {
    color: #999;
    cursor: pointer;
    padding-left: 10px;
  }
  .del:hover {
    color: #333;
  }
}
</style>